<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用说明 - 待办事项四象限图</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1>待办事项四象限图 - 使用说明</h1>

        <div class="instruction-content">
            <section>
                <h2>项目介绍</h2>
                <p>这是一个基于四象限法则的待办事项管理工具，帮助您根据任务的重要性和紧急性进行分类和管理。</p>
            </section>

            <section>
                <h2>功能特点</h2>
                <ul>
                    <li>
                        <strong>四象限分类</strong>：根据任务的重要性和紧急性将任务分为四个象限
                        <ul>
                            <li>第一象限：重要且紧急（红色）</li>
                            <li>第二象限：重要不紧急（绿色）</li>
                            <li>第三象限：不重要但紧急（黄色）</li>
                            <li>第四象限：不重要不紧急（蓝色）</li>
                        </ul>
                    </li>
                    <li><strong>可视化任务点</strong>：每个任务在对应象限中显示为一个彩色点</li>
                    <li><strong>任务详情查看</strong>：悬停可查看任务标题，点击可查看完整任务详情</li>
                    <li><strong>本地存储</strong>：使用浏览器本地存储保存任务，关闭页面后数据不会丢失</li>
                    <li><strong>右键删除</strong>：右键点击任务点可以删除对应任务</li>
                    <li><strong>截止时间设置</strong>：为任务设置截止时间，系统会根据剩余时间自动调整任务状态</li>
                    <li><strong>任务自动移动</strong>：根据截止时间自动调整任务象限，临近截止时间的任务会自动移至紧急象限</li>
                    <li><strong>任务拖拽功能</strong>：可以直接拖拽任务点到不同象限，手动调整任务的重要性和紧急性</li>
                    <li><strong>历史任务区域</strong>：完成的任务会移至历史任务区域，可以查看已完成任务的详情</li>
                    <li><strong>任务列表视图</strong>：除了象限图外，还提供列表视图方便查看所有任务</li>
                    <li><strong>任务状态提醒</strong>：临近截止时间的任务会有视觉提醒（放大、闪烁效果）</li>
                    <li><strong>粒子背景效果</strong>：美观的动态粒子背景，提升用户体验</li>
                </ul>
            </section>

            <section>
                <h2>使用方法</h2>
                <ol>
                    <li>
                        <strong>添加任务</strong>：在表单中填写任务标题、描述和选择对应象限
                    </li>
                    <li>
                        <strong>设置截止时间</strong>：可选择为任务设置截止时间，系统会根据剩余时间自动调整任务状态
                    </li>
                    <li>
                        <strong>查看任务</strong>：
                        <ul>
                            <li>将鼠标悬停在任务点上可以查看任务标题和剩余时间</li>
                            <li>点击任务点可以查看任务的详细描述和截止时间信息</li>
                        </ul>
                    </li>
                    <li>
                        <strong>管理任务</strong>：
                        <ul>
                            <li>右键点击任务点可以删除任务</li>
                            <li>点击任务详情中的"完成任务"按钮可将任务移至历史任务区域</li>
                            <li>在历史任务区域点击任务可查看详情，并可选择恢复任务</li>
                        </ul>
                    </li>
                    <li>
                        <strong>调整任务位置</strong>：
                        <ul>
                            <li>直接拖拽任务点到不同象限，手动调整任务的重要性和紧急性</li>
                            <li>系统会根据新位置自动更新任务的象限属性</li>
                        </ul>
                    </li>
                    <li>
                        <strong>任务列表查看</strong>：在左侧任务列表中可以查看所有任务，点击列表项可查看详情
                    </li>
                </ol>
            </section>

            <section>
                <h2>技术实现</h2>
                <ul>
                    <li><strong>前端技术</strong>：纯前端实现，使用HTML、CSS和JavaScript</li>
                    <li><strong>布局设计</strong>：使用CSS Grid布局实现四象限结构</li>
                    <li><strong>数据存储</strong>：使用LocalStorage实现数据持久化存储</li>
                    <li><strong>拖拽功能</strong>：使用HTML5原生拖放API实现任务拖拽功能</li>
                    <li>
                        <strong>动态效果</strong>：
                        <ul>
                            <li>使用CSS动画实现任务点的闪烁和放大效果</li>
                            <li>使用Canvas实现粒子背景动画效果</li>
                        </ul>
                    </li>
                    <li>
                        <strong>时间管理</strong>：
                        <ul>
                            <li>使用JavaScript Date对象处理时间计算</li>
                            <li>使用setInterval定时检查任务截止时间并自动调整任务位置</li>
                        </ul>
                    </li>
                    <li><strong>响应式设计</strong>：适配不同屏幕尺寸，提供良好的移动端体验</li>
                    <li><strong>模态框交互</strong>：使用自定义模态框实现任务详情查看和确认对话框</li>
                </ul>
            </section>
        </div>

        <div class="footer-links">
            <a href="index.html" class="footer-link">返回主页</a>
        </div>
    </div>

    <canvas id="particle-canvas" class="particle-canvas"></canvas>
    <script src="particles.js"></script>
</body>

</html>